[Alerting v2] Add quick edit rule flyout to the rules list by yiannisnikolopoulos · Pull Request #268164 · elastic/kibana

yiannisnikolopoulos · 2026-05-07T11:54:52Z

Summary

Screen.Recording.2026-05-07.at.4.27.34.PM.mov

Adds a quick edit flyout to the v2 alerting rule list page, allowing users to edit a subset of rule fields inline without navigating to the full edit page.

Entry points

Pencil icon in rule summary flyout transforms the flyout in-place to edit mode
Pencil icon in rule list table opens the quick edit flyout directly from the actions column

Editable fields

Name, Description, Tags
Grouping key, Time field
Interval , Lookback window
Alert delay, Recovery type, Recovery delay

Read-only fields

ES|QL query (displayed as code block)
Track active/recovered state (disabled checkbox with tooltip)

Changes

New files:

quick_edit_rule_flyout.tsx — the quick edit flyout component
quick_edit_rule_flyout.test.tsx — unit tests

@kbn/alerting-v2-rule-form package:

kind_field.tsx — added disabled and compact props. Compact mode renders a flat EuiCheckableCard with an EuiIconTip tooltip instead of inline description text
gui_rule_form.tsx — added isEditing prop to disable KindField in edit mode
rule_form.tsx — propagates isEditing based on ruleId presence
Exported field group components (RuleDetailsFieldGroup, ConditionFieldGroup, RuleExecutionFieldGroup, AlertConditionsFieldGroup, KindField) for modular reuse

alerting_v2 plugin:

rule_summary_flyout.tsx — added pencil icon + onQuickEdit prop, bumped flyout size to m
rules_list_table.tsx — added pencil icon in actions column
rules_list_table_container.tsx — wires quick edit state with mutual exclusivity (only one flyout open at a time), uses key={rule.id} to force re-mount on rule switch
rule_summary_flyout.test.tsx — added missing onQuickEdit prop + test for pencil icon

Figma design for reference: URL

coderabbitai · 2026-05-07T15:25:35Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Enterprise

Run ID: 72559e4e-fdc3-46cf-ac8d-5b3805caca6f

📥 Commits

Reviewing files that changed from the base of the PR and between 6f9abbb and 6016622.

📒 Files selected for processing (14)

x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/fields/kind_field.tsx
x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/gui_rule_form.tsx
x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/index.tsx
x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/form/rule_form.tsx
x-pack/platform/packages/shared/response-ops/alerting-v2-rule-form/index.ts
x-pack/platform/plugins/shared/alerting_v2/public/components/rule/flyouts/index.ts
x-pack/platform/plugins/shared/alerting_v2/public/components/rule/flyouts/quick_edit_rule_flyout.test.tsx
x-pack/platform/plugins/shared/alerting_v2/public/components/rule/flyouts/quick_edit_rule_flyout.tsx
x-pack/platform/plugins/shared/alerting_v2/public/components/rule/flyouts/rule_summary_flyout.test.tsx
x-pack/platform/plugins/shared/alerting_v2/public/components/rule/flyouts/rule_summary_flyout.tsx
x-pack/platform/plugins/shared/alerting_v2/public/hooks/use_update_rule.ts
x-pack/platform/plugins/shared/alerting_v2/public/pages/rules_list_page/rules_list_table.test.tsx
x-pack/platform/plugins/shared/alerting_v2/public/pages/rules_list_page/rules_list_table.tsx
x-pack/platform/plugins/shared/alerting_v2/public/pages/rules_list_page/rules_list_table_container.tsx

📝 Walkthrough

Walkthrough

This PR introduces a quick-edit flyout for inline rule updates in alerting v2. The feature adds a new QuickEditRuleFlyout component that allows users to edit rule details, conditions, execution settings, and alert conditions without navigating away. The KindField component is enhanced with disabled and compact props to prevent field kind changes during editing and render a simplified UI in the flyout. A new useUpdateRule hook handles rule mutations with cache invalidation and success/error notifications. Integration points include a quick-edit pencil button in the rule summary flyout header and a matching button in the rules list table actions column. State management in the container coordinates the two flyouts (summary and quick-edit) so only one displays at a time.

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	PR implements all acceptance criteria: quick edit accessible via icon in rule summary flyout [rule_summary_flyout.tsx] and actions column in rules list [rules_list_table.tsx]; ES\|QL field remains non-editable [quick_edit_rule_flyout.tsx shows query as code block only].
Out of Scope Changes check	✅ Passed	All changes directly support quick edit feature. No unrelated modifications detected; updates to kind_field.tsx, gui_rule_form.tsx, and rule_form.tsx all enable editing mode detection and field disabling per requirements.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

🛠️ Update Documentation: Commit on current branch
🛠️ Update Documentation: Create PR

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

Generate code and open pull requests
Plan features and break down work
Investigate incidents and troubleshoot customer tickets together
Automate recurring tasks and respond to alerts with triggers
Summarize progress and report instantly

Built for teams:

Shared memory across your entire org—no repeating context
Per-thread sandboxes to safely plan and execute work
Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

baileycash-elastic

core functionality looks good...

probably should add scout tests (realized after I approved)
one other nit below

baileycash-elastic · 2026-05-08T00:32:09Z

+  const lens = useService(PluginStart('lens')) as LensPublicStart;
+
+  const ruleFormServices = useMemo(
+    () => ({ http, data, dataViews, notifications, application, lens }),


are all of these being used by the context provider?

Only http, data, and dataViews are actually consumed by the field groups in the quick edit flow. lens is only used by the PreviewChart component (not rendered here), and notifications/application aren't used by any of the field group components. However, the RuleFormServices interface in the shared package requires all six so we can't drop them without making those fields optional in the type.

baileycash-elastic

Can you add scout tests for this flow?

kibanamachine · 2026-05-08T16:55:40Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 094fa1c

Failed CI Steps

Test Failures

[job] [logs] FTR Configs #16 / discover Discover CSV Export Generate CSV: new search generates a report from a new search with data: default
[job] [logs] Scout Lane #19 - serverless-observability_complete / default / local-serverless-observability_complete - Serverless Observability Navigation - Complete tier body - clicking body nav items sets the active link, updates breadcrumbs, and navigates
[job] [logs] Scout Lane #7 - stateful-classic / default / local-stateful-classic - APM integration not installed but setup completed - Admin user
[job] [logs] Scout Lane #7 - stateful-classic / default / local-stateful-classic - Collector integration is not installed - collector integration missing
[job] [logs] Scout Lane #7 - stateful-classic / default / local-stateful-classic - Collector integration is not installed - Symbolizer integration is not installed
[job] [logs] Scout Lane #7 - stateful-classic / default / local-stateful-classic - Observability Landing Page (discover.isEsqlDefault enabled) - redirects to onboarding when no logs data exists
[job] [logs] Scout Lane #7 - stateful-classic / default / local-stateful-classic - Profiling is setup and data is loaded - Admin user
[job] [logs] Scout Lane #7 - stateful-classic / default / local-stateful-classic - Profiling is setup and data is loaded - Viewer user
[job] [logs] FTR Configs #69 / Serverless Common UI - Home Page Sample data in serverless Sample data loads
[job] [logs] FTR Configs #214 / Serverless Common UI - Home Page Sample data in serverless Sample data loads

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`alertingVTwo`	986	988	+2

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/alerting-v2-rule-form`	58	63	+5

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`alertingVTwo`	731.3KB	733.1KB	+1.8KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`alertingVTwo`	44.0KB	44.0KB	-5.0B

Unknown metric groups

API count

id	before	after	diff
`@kbn/alerting-v2-rule-form`	114	121	+7

async chunk count

id	before	after	diff
`alertingVTwo`	17	16	-1

History

💛 Build #439585 was flaky 6016622
💔 Build #439563 failed b4dd813
💔 Build #439484 failed c463423

baileycash-elastic

lgtm!

…m state (#268774) ## Summary Closes #268771 Adds `ComposeDiscoverFlyout`, the stepped Edit Form flyout for v2 rule authoring. This is PR B in a series; PR A (#268739) adds `HorizontalMinimalStepper` as a foundation. **What's in this PR:** - `ComposeDiscoverFlyout` component with a 3-step form: **Alert Condition → Details & Artifacts → Notifications** - Complete RHF migration: all submitted values (`name`, `tags`, `schedule`, `lookback`, `timeField`, `grouping`, `query`, delays) live in `useForm<FormValues>()`; reducer owns only UI state (`step`, `childOpen`, `yamlMode`, `queryCommitted`, etc.) - **Create mode** — wired to `useCreateRule` mutation; entry point is the new **"Create in flyout"** button on the rules list (alongside **"Create rule"** which still navigates to the full-page form) - **Edit mode** — wired to `useUpdateRule`; entry point is the edit icon on any rule row (replaces `QuickEditRuleFlyout`) - **Discover Sandbox** — child flyout with a single ES|QL editor, Lens histogram, and data grid; opens via "Open query editor" / "Edit query" in the Alert Condition step - **YAML preview** — toggle in header shows read-only CodeEditor with rule YAML; editing round-trip is deferred - Reuses `RuleDetailsFieldGroup` and `RuleExecutionFieldGroup` from PR #268164 **What's NOT in this PR (deferred):** - No Recovery Condition step (PR E) - No tracking toggle or split-query support - Notifications step is a placeholder callout - Runbook URL / Dashboard link are disabled stubs - Sandbox UI unpolished (redesign in PR C) - YAML round-trip editing deferred ### State architecture ``` useForm<FormValues>() ← submitted values: name, tags, schedule, query, timeField, grouping, delays useReducer(uiReducer) ← UI only: step, childOpen, fullQuery, yamlMode, queryCommitted, sandboxDateStart/End ``` One bridge: when the user clicks **Apply changes** in the Sandbox, a `useEffect` syncs `uiState.fullQuery → setValue('evaluation.query.base', ...)`. Everything else writes directly to RHF via `useFormContext()`. --- ## Test plan ### Prerequisites Start Elasticsearch: ```bash cd ~/__projects__/kibana-dev/pr-b-rhf-form node scripts/es snapshot --license=trial ``` Start Kibana (Node 24 required): ```bash export NVM_DIR="$HOME/.nvm" && source "$NVM_DIR/nvm.sh" && nvm use 24 KBN_USE_RSPACK=true yarn start \ --server.port=5603 \ --server.basePath=/ifh \ --server.rewriteBasePath=true ``` `config/kibana.dev.yml`: ```yaml xpack.alerting_v2.enabled: true dev.basePathProxyTarget: 5604 mockIdpPlugin.enabled: false ``` Navigate to: `http://localhost:5603/ifh/app/management/alertingV2/rules` --- ### Create flow - [ ] Click **Create in flyout** (next to the primary "Create rule" button) — flyout opens in create mode; Discover Sandbox opens alongside it automatically - [ ] Verify 3 steps in the header stepper: Alert Condition, Details & Artifacts, Notifications - [ ] In the Sandbox: type a query (e.g. `FROM logs-* | STATS count = COUNT(*) BY host.name | WHERE count > 0`), click **Search** — verify histogram and results grid appear - [ ] Click **Apply changes** — Sandbox closes; Alert Condition step shows the committed query summary - [ ] Change the **Time field** dropdown — verify it reflects in the form - [ ] Adjust **schedule** and **lookback** via the schedule fields - [ ] Click **Next** → **Details & Artifacts**: fill in rule name and tags via the standard field group - [ ] Click **Next** → **Notifications**: verify placeholder callout appears (not wired yet — expected) - [ ] Click **Create rule** — verify rule appears in the list with correct name, tags, and schedule - [ ] Verify the primary **Create rule** button (filled, left of "Create in flyout") still navigates to the full-page form ### Edit flow - [ ] Click the edit (pencil) icon on an existing rule — flyout opens in edit mode, pre-populated with that rule's values - [ ] Modify the rule name in Details & Artifacts - [ ] Click **Save rule** — verify the rule updates and the change appears in the list ### YAML preview - [ ] Toggle YAML mode in the flyout header — stepper collapses; CodeEditor shows read-only rule YAML - [ ] Fill in form fields, toggle YAML mode — verify YAML reflects the current values ### Edge cases - [ ] Open the Sandbox, edit the query, close without clicking **Apply changes** — verify the Alert Condition step still shows the previously committed query - [ ] Verify **Next** is disabled while the Sandbox is open --------- Co-authored-by: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Bailey Cash <bailey.cash@elastic.co>

…m state (elastic#268774) ## Summary Closes elastic#268771 Adds `ComposeDiscoverFlyout`, the stepped Edit Form flyout for v2 rule authoring. This is PR B in a series; PR A (elastic#268739) adds `HorizontalMinimalStepper` as a foundation. **What's in this PR:** - `ComposeDiscoverFlyout` component with a 3-step form: **Alert Condition → Details & Artifacts → Notifications** - Complete RHF migration: all submitted values (`name`, `tags`, `schedule`, `lookback`, `timeField`, `grouping`, `query`, delays) live in `useForm<FormValues>()`; reducer owns only UI state (`step`, `childOpen`, `yamlMode`, `queryCommitted`, etc.) - **Create mode** — wired to `useCreateRule` mutation; entry point is the new **"Create in flyout"** button on the rules list (alongside **"Create rule"** which still navigates to the full-page form) - **Edit mode** — wired to `useUpdateRule`; entry point is the edit icon on any rule row (replaces `QuickEditRuleFlyout`) - **Discover Sandbox** — child flyout with a single ES|QL editor, Lens histogram, and data grid; opens via "Open query editor" / "Edit query" in the Alert Condition step - **YAML preview** — toggle in header shows read-only CodeEditor with rule YAML; editing round-trip is deferred - Reuses `RuleDetailsFieldGroup` and `RuleExecutionFieldGroup` from PR elastic#268164 **What's NOT in this PR (deferred):** - No Recovery Condition step (PR E) - No tracking toggle or split-query support - Notifications step is a placeholder callout - Runbook URL / Dashboard link are disabled stubs - Sandbox UI unpolished (redesign in PR C) - YAML round-trip editing deferred ### State architecture ``` useForm<FormValues>() ← submitted values: name, tags, schedule, query, timeField, grouping, delays useReducer(uiReducer) ← UI only: step, childOpen, fullQuery, yamlMode, queryCommitted, sandboxDateStart/End ``` One bridge: when the user clicks **Apply changes** in the Sandbox, a `useEffect` syncs `uiState.fullQuery → setValue('evaluation.query.base', ...)`. Everything else writes directly to RHF via `useFormContext()`. --- ## Test plan ### Prerequisites Start Elasticsearch: ```bash cd ~/__projects__/kibana-dev/pr-b-rhf-form node scripts/es snapshot --license=trial ``` Start Kibana (Node 24 required): ```bash export NVM_DIR="$HOME/.nvm" && source "$NVM_DIR/nvm.sh" && nvm use 24 KBN_USE_RSPACK=true yarn start \ --server.port=5603 \ --server.basePath=/ifh \ --server.rewriteBasePath=true ``` `config/kibana.dev.yml`: ```yaml xpack.alerting_v2.enabled: true dev.basePathProxyTarget: 5604 mockIdpPlugin.enabled: false ``` Navigate to: `http://localhost:5603/ifh/app/management/alertingV2/rules` --- ### Create flow - [ ] Click **Create in flyout** (next to the primary "Create rule" button) — flyout opens in create mode; Discover Sandbox opens alongside it automatically - [ ] Verify 3 steps in the header stepper: Alert Condition, Details & Artifacts, Notifications - [ ] In the Sandbox: type a query (e.g. `FROM logs-* | STATS count = COUNT(*) BY host.name | WHERE count > 0`), click **Search** — verify histogram and results grid appear - [ ] Click **Apply changes** — Sandbox closes; Alert Condition step shows the committed query summary - [ ] Change the **Time field** dropdown — verify it reflects in the form - [ ] Adjust **schedule** and **lookback** via the schedule fields - [ ] Click **Next** → **Details & Artifacts**: fill in rule name and tags via the standard field group - [ ] Click **Next** → **Notifications**: verify placeholder callout appears (not wired yet — expected) - [ ] Click **Create rule** — verify rule appears in the list with correct name, tags, and schedule - [ ] Verify the primary **Create rule** button (filled, left of "Create in flyout") still navigates to the full-page form ### Edit flow - [ ] Click the edit (pencil) icon on an existing rule — flyout opens in edit mode, pre-populated with that rule's values - [ ] Modify the rule name in Details & Artifacts - [ ] Click **Save rule** — verify the rule updates and the change appears in the list ### YAML preview - [ ] Toggle YAML mode in the flyout header — stepper collapses; CodeEditor shows read-only rule YAML - [ ] Fill in form fields, toggle YAML mode — verify YAML reflects the current values ### Edge cases - [ ] Open the Sandbox, edit the query, close without clicking **Apply changes** — verify the Alert Condition step still shows the previously committed query - [ ] Verify **Next** is disabled while the Sandbox is open --------- Co-authored-by: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Bailey Cash <bailey.cash@elastic.co>

[Alerting v2] Add quick edit rule flyout to the rules list

d22f7e5

yiannisnikolopoulos added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting Feature:AlertingV2 labels May 7, 2026

github-actions Bot added the author:actionable-obs PRs authored by the actionable obs team label May 7, 2026

fix a few nits

c463423

yiannisnikolopoulos marked this pull request as ready for review May 7, 2026 13:40

yiannisnikolopoulos requested a review from a team as a code owner May 7, 2026 13:40

yiannisnikolopoulos added 2 commits May 7, 2026 17:42

Merge branch 'main' into feat-add-quick-edit-flyout

b4dd813

restore useUpdateRule hook

6016622

yiannisnikolopoulos added the av2-docs-needed Tracks PRs that may need v2 alerting docs label May 7, 2026

baileycash-elastic approved these changes May 8, 2026

View reviewed changes

baileycash-elastic requested changes May 8, 2026

View reviewed changes

add scout tests for quick edit flow

094fa1c

baileycash-elastic approved these changes May 8, 2026

View reviewed changes

yiannisnikolopoulos merged commit ecb65ec into elastic:main May 8, 2026
31 checks passed

kibanamachine added the v9.5.0 label May 8, 2026

jasonrhodes mentioned this pull request May 11, 2026

[Alerting v2] Compose Discover: Rule authoring flyout with Discover Sandbox (planning draft) #267982

Draft

7 tasks

nastasha-solomon mentioned this pull request May 12, 2026

[Alerting V2] [DOCS] [M2] Edit alert rules inline from the rules list using the Quick Edit flyout elastic/docs-content#6417

Open

jasonrhodes mentioned this pull request May 12, 2026

[Alerting v2] Compose Discover: stepped Edit Form flyout with RHF form state #268774

Merged

17 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Alerting v2] Add quick edit rule flyout to the rules list#268164

[Alerting v2] Add quick edit rule flyout to the rules list#268164
yiannisnikolopoulos merged 5 commits into
elastic:mainfrom
yiannisnikolopoulos:feat-add-quick-edit-flyout

yiannisnikolopoulos commented May 7, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 7, 2026

Walkthrough

Uh oh!

baileycash-elastic left a comment •

edited

Loading

Uh oh!

baileycash-elastic May 8, 2026

Uh oh!

yiannisnikolopoulos May 8, 2026

Uh oh!

baileycash-elastic left a comment

Uh oh!

kibanamachine commented May 8, 2026

API count

async chunk count

Uh oh!

baileycash-elastic left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

yiannisnikolopoulos commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Entry points

Editable fields

Read-only fields

Changes

Figma design for reference: URL

Uh oh!

coderabbitai Bot commented May 7, 2026

Walkthrough

Uh oh!

baileycash-elastic left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

baileycash-elastic May 8, 2026

Choose a reason for hiding this comment

Uh oh!

yiannisnikolopoulos May 8, 2026

Choose a reason for hiding this comment

Uh oh!

baileycash-elastic left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented May 8, 2026

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

async chunk count

History

Uh oh!

baileycash-elastic left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

yiannisnikolopoulos commented May 7, 2026 •

edited

Loading

baileycash-elastic left a comment •

edited

Loading